<template>
  <ContentBase>
    <div class="card single-post" v-for="post in posts.reverse()" :key="post.id">
      <div class="card">
        <div class="card-header">
          <p>{{post.username}}</p>
        </div>
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>{{ post.content }}</p>
            <footer class="blockquote-footer"><img class="img-fluid float-right" :src="post.photo" alt=""></footer>
          </blockquote>
        </div>
      </div>
    </div>
  </ContentBase> 
</template>

<script>
import ContentBase from  '../components/ContentBase';
import $ from 'jquery';
import { ref } from 'vue';
export default {
  name: 'HomeView',
  components: {
    ContentBase,
  },
  setup(){
    let posts = ref([])

    $.ajax({
      url: "/api/posts",
      type: "get",
      success(resp) {
        posts.value = resp;
        console.log(posts.value.length)
      }
    })
    return {
      posts
    }
  }
}
</script>

<style scoped>
.single-post {
  margin-bottom: 10px;
}
.img-fluid {
  max-width: 3%;
  height: auto;
}
img {
  border-radius: 50%;
}
</style>